{extend name='public/base' /}

{block name='content'}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设置我的资料</div>
                <div class="layui-card-body" pad15>

                    <div class="layui-form" lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">我的角色</label>
                            <div class="layui-input-inline">
                                <select name="role" lay-verify="">
                                    <option value="1" selected>超级管理员</option>
                                    <option value="2" disabled>普通管理员</option>
                                    <option value="3" disabled>审核员</option>
                                    <option value="4" disabled>编辑人员</option>
                                </select>
                            </div>
                            <div class="layui-form-mid layui-word-aux">当前角色不可更改为其它角色</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" value="{$data.account}" readonly
                                       class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登入名</div>
                        </div>
<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">密码</label>-->
<!--                            <div class="layui-input-inline">-->
<!--                                <input type="password" name="password" value="" autocomplete="off" placeholder="请输入新密码"-->
<!--                                       class="layui-input">-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-upload-drag" id="test10">
                                {if !$data.avatar }
                                <i class="layui-icon"></i>
                                <p>更换头像</p>
                                <div class="layui-hide" id="uploadDemoView">
                                    <!--                                    <hr>-->
                                    <img src="" alt="上传成功后渲染" style="max-width: 150px">
                                </div>
                                {else /}
                                <i class="layui-icon" style="display: none"></i>
                                <p style="display: none">更换头像</p>
                                <div class="" id="uploadDemoView">
                                    <!--                                    <hr>-->
                                    <img src="{$data.avatar.src}" alt="上传成功后渲染" style="max-width: 150px" >
                                </div>
                                {/if}
                            </div>
                            <input type="hidden" name="avatar" value="">
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">手机</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mobile" value="{$data.mobile|default=''}" lay-verify="phone" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" value="{$data.email|default=''}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
<!--                        <div class="layui-form-item layui-form-text">-->
<!--                            <label class="layui-form-label">简介</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <textarea name="describe" placeholder="请输入内容" class="layui-textarea">{$data.describe|default=''}</textarea>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="formInfo">确认修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script>
    layui.use(['upload', 'form', 'layer'], function () {
        let $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
        //拖拽上传
        upload.render({
            elem: '#test10',
            url: '/manage/system/upload/image',
            done: function (res) {
                if (res.code === 0) {
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                    $('#test10 i').hide();
                    $('#test10 p').hide();
                    $("input[name='avatar']").val(res.data.path);
                    console.log(res)
                } else {
                    layer.msg(res.message);
                }
            }
        });

        //监听提交
        form.on('submit(formInfo)', function (data) {
            $.ajax({
                type: "post",
                url: '/manage/system/myInfo/update',
                data: data.field,
                success: function (data) {
                    // 根据服务端二次验证的结果进行跳转等操作
                    if (data.code !== 0) {
                        layer.msg(data.message, {icon: 5});
                    } else {
                        layer.msg('修改成功，下次登陆即可展示', {icon: 1});
                    }
                }
            });
        });
    });
</script>
{/block}
